<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>保险产品</title>
	<link rel="stylesheet" type="text/css" href="../../build/css/base.css"/>
	<link rel="stylesheet" type="text/css" href="../../build/css/style.css">
	<style>
		.filter li{width: 33.333%}
	</style>
</head>
<body>
	<div id="container" style="padding-bottom:50px;padding-top:10px;">
		<!-- 搜索 -->
		<div class="search-wrap">
			<input class="search-top" :class="{active:inputFocus}" v-model="inputValue" type="search" @keyup.enter="searchList">
			<p :class="{active:inputFocus}"><span class="iconfont">&#xe601;</span>{{inputText}}</p>
			<button type="button" v-if="inputFocus" @click="searchCancel">取消</button>
			<div class="search-bac" v-if="inputFocus">
				<div class="history-list-wrap">
					<p><span class="iconfont">&#xe627;</span>历史搜索</p>
					<ul>
						<li class="history-list" v-for="item in historyList">
							<i  @click="hisSearch(item.keywords)">{{item.keywords}}</i><span class="iconfont" @click="delKeyWords(item.idStr)">&#xe624;</span>
						</li>
					</ul>
					<a v-if="historyList.length>0" @click="delAllKeyWords">清空搜索记录</a>
				</div>
			</div>
		</div>
		<!--产品列表-->
		<my-top></my-top>
		<!--筛选条件-->
		<div class="filter">
			<ul class="clear-fix">
				<li @click="filter(0,'SERIOUS_ILLNESS_PROTECTION')" :class="{active:filt}">重大疾病</li>
				<li @click="filter(1,'CAPITAL_ACCUMULATION')" :class="{active:filt}">高端医疗</li>
				<li @click="filter(2,'WEALTH_INHERITANCE')" :class="{active:filt}">财富传承</li>
			</ul>
		</div>
		<div class="pro-insurance">
			<h2><span>保险推荐</span></h2>
			<div class="pro-insurance-list" v-for="item in proList">
				<a v-bind:href="'product_4_detail.html?idStr='+item.productIdStr">
					<!--<img src="../../build/images/insurance-list.png" alt="">-->
					<img :src="item.bannerImg2" alt="">
				</a>
			</div>
		</div>
		<div class="empetDate">
 			<span class="iconfont">&#xe602;</span>
 			抱歉！没找到更多数据
 		</div>
		<!--列表-->

		<!--底栏-->
		 <my-footer></my-footer>
	</div>
<script src="../../build/public/vue.js" charset="utf-8"></script>
<script src="../../build/js/config.js" charset="utf-8"></script>
<script src="../../build/js/common.js" charset="utf-8"></script>
<script src="../../build/js/jquery.min.js"></script>
<script src="../../build/js/template.js"></script>
<script src="../../build/public/vue-resource.js" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
	el:"#container",
	data:{
		page:1,
		type:'',
		filt:false,
		proList:[],
		pageCount:'',
		inputText:'大家都在搜：银行理财',
		inputValue:'',
		inputFocus:false,
		historyList:[],
	},
	mounted:function(){
		this.$nextTick(function(){
			vm.getList();
			vm.init();
			refresh(vm.refreshData())
		})
	},
	methods:{
		//获取列表数据
		getList:function(){
			loader.init();
			get('/product/insurance/list',{
				currentPage:vm.page,
				insuranceKind:vm.type
			},function(res){
				vm.pageCount = res.data.totalCount/res.data.pageSize
				vm.proList = vm.proList.concat(res.data.resultList);
				var len = vm.proList
				for(var i=0; i<len.length;i++){
					len[i].bannerImg2 = domain + vm.proList[i].bannerImg;
					console.log(vm.proList[i].bannerImg2)
				}
				if(res.data.resultList.length == 0){
					refreshText('到底了哦！')
				}else{
					refreshText('上拉加载更多数据')
				}
				if(vm.proList.length == 0){
					document.querySelector('.empetDate').style.display = 'block';
					refreshText('')
				}else{
					document.querySelector('.empetDate').style.display = 'none';
				}
				if(vm.proList.length <5){
					refreshText('')
				}
				loader.remove();
			})
		},
		//确定筛选
		filter:function(index,type){
			vm.proList = [];
			var list = document.querySelectorAll('.filter li');
			for(var i=0;i<list.length;i++){
				list[i].classList.remove('active')
			}
			list[index].classList.add('active')
			vm.page = 1;
			vm.type = type;
			vm.getList();
		},
		refreshData:function(){
			return function(){
				if(vm.page > vm.pageCount){
					refreshText('到底了哦！')
				}else {
					vm.page++;
					vm.getList();
				}
			}
		},
		init:function(){
			var searchWrap = document.querySelector('.search-wrap');
			var searchInput = document.querySelector('.search-top');
			var footer = document.querySelector('.footer')
			searchInput.onfocus = function(){
				vm.inputFocus = true;
				vm.inputText = '';
				vm.showKeyWords();
				footer.style.display = 'none';
				searchWrap.style.cssText = 'position:fixed;top:10px;'
			}
			searchInput.onblur = function(){

			}
		},
		searchCancel:function(){
			var footer = document.querySelector('.footer');
			var searchWrap = document.querySelector('.search-wrap');
			vm.inputFocus = false;
			vm.inputText = '大家都在搜：银行理财';
			vm.inputValue = '';
			footer.style.display = 'block';
			searchWrap.style.cssText = 'position:relative;'
		},
		showKeyWords:function(){
			noParamsGet('/advisor/home/keywords-history',function(res){
				vm.historyList = res.data.slice(0,10);
			})
		},
		delKeyWords:function(idStr){
			post('/advisor/home/keywords-history/remove',{
				keywordsHistoryIdStr:idStr
			},function(res){
				vm.showKeyWords();
				toast('已删除')
			})
		},
		delAllKeyWords:function(){
			noParamsPost('/advisor/home/keywords-history/clear',function(res){
				vm.showKeyWords();
				toast('已清空')
			})
		},
		searchList:function(){
			console.log(vm.inputValue);
			if(vm.inputValue == ''){
				toast('请输入搜索条件');
				return
			}
			window.location.href = 'search.html?keyWord='+vm.inputValue;
		},
		hisSearch:function(keywords){
			vm.inputValue = keywords;
			window.location.href = 'search.html?keyWord='+vm.inputValue;
		}
	}
})
</script>

</body>
</html>
